<template>
    <div style="width:600px;height:300px">
        <schart ref='pie' class='schart' canvasId='pie' :options='chart1' style="width:600px;height:300px"></schart>
    </div>
</template>
<script>
import echarts from "echarts";
import Schart from 'vue-schart'
export default {
    name: "addressChart",
    created() {
        this.getAllEcharts();
    },
    data() {
        return {
            chart1: {
                type: 'pie',
                title: {
                    text: '学生来源分布'
                },
                xRorate: 25,
                legend: {
                    position: 'left'
                },
                labels: [],
                // labels: ['河北', '山西', '吉林', '辽宁', '黑龙江', '江苏', '浙江', '安徽','福建', '江西', ],
                datasets: [
                    {
                        // data: [15, 2, 3, 4, 5, 6, 7, 8]
                        data: []
                    }
                ]
            },
        };
    },
    methods: {
        load_status() {
            this.getAllEcharts()
        },
        async getAllEcharts() {
            const {data: res1} = await this.$axios.get("/echarts");
            // console.log(res1);
            this.chart1.labels = res1.name;
            this.chart1.datasets[0].data = res1.num;
        },
        setChart() {
            // 基于准备好的dom，初始化echarts实例
            this.chart = echarts.init(document.getElementById('main'))
            // console.log(this.chart)
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: "人数分布"
                },
                tooltip: {},
                legend: {
                    data: ["人数"]
                },
                xAxis: {
                    data: this.name,
                },
                yAxis: {},
                series: [
                    {
                        name: "人数",
                        type: "bar",
                        data: this.num,
                    }
                ],
            }
            this.chart.setOption(option);
        },
        mounted() {
            this.load_status()
            // this.$nextTick(function () {
            //     this.drawPid("main");
            // });
        }
    },
    components: {
        Schart,
        echarts
    }
}
</script>
